<template>
    <div class="pd20">
        <div>
            <fieldset>
                <legend><div class="lines"></div><p class="fs18 wh100">车型信息</p></legend>
                <div class="flex mt18 mb10 flex-wrap ml20">
                    <div class="fb50">车牌号：<span> 京LEU765</span></div>
                    <div class="fb50">车辆识别代码：<span> LESHS872HANSKDY83</span></div>
                    <div class="fb50">车辆品牌：<span> 一汽大众</span></div>
                    <div class="fb50">车辆状态：<span> 安全</span></div>
                    <div class="fb50">车辆当前位置：<span> 北京市海淀区四维图新大厦</span></div>
                </div>
            </fieldset>
        </div>
        <div class="mt20">
            <fieldset>
                <legend><div class="lines"></div><p class="fs18 wh100">保险信息</p></legend>
                <div class="flex mt18 mb10 flex-wrap ml20">
                    <div class="fb50">保险状态：<span> 保障中</span></div>
                    <div class="fb50">保险期间：<span> 2020年6月21日0:00时起至2021年6月20日24:00时止</span></div>
                    <div class="fb50">购险日期：<span> 2020年4月2日</span></div>
                    <div class="fb50">保单号：<span> PDAA201861270000031519</span></div>
                    <div class="fb50">保费合计：<span> ￥19，300元</span></div>
                    <div class="fb50">投保地区：<span> 北京市西城区</span></div>
                    <div class="fb50">续保情况：<span> 一年</span></div>
                    <div class="fb50">销售渠道：<span> 4S店</span></div>
                </div>
            </fieldset>
        </div>
        <div class="line mt18"></div>
        <h5 class="fs18 mb20" style="color: #3C3A6F;">避灾历史</h5>
        <el-table class="sd" :data="tableData">
            <el-table-column align="center" prop="index" label="序号" width="100px"></el-table-column>
            <el-table-column align="center" prop="szDate" label="受灾时间"></el-table-column>
            <el-table-column align="center" prop="szType" label="受灾天气类型"></el-table-column>
            <el-table-column align="center" prop="szPosition" label="受灾地理位置"></el-table-column>
            <el-table-column align="center" prop="yjDate" label="避险通知时间"></el-table-column>
            <el-table-column align="center" prop="bxType" label="避险通知方式"></el-table-column>
            <el-table-column align="center" prop="bxResult" label="避险结果"></el-table-column>
            <el-table-column align="center" prop="bonus" label="奖励金"></el-table-column>
        </el-table>
        <el-pagination class="tpl-mg-t fr mt20"
                        small
                        @size-change="pageSizeChange"
                        @current-change="pageCurrentChange"
                        :current-page="queryForm.pageNum"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="queryForm.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        style="margin-bottom: 5px">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: 'depotDetail',
        data () {
            return {
                // tab页标签
                activeName: 'operationList',
                // 列表查询条件
                queryForm: {
                    brand: '',
                    activityTitle: '',
                    activityStatus: '',
                    activityId: '',
                    pageNum: 1,
                    pageSize: 10
                },
                // total: 0,
                tableData: [],
                tableSelection: [],
                // 基础数据列表
                baseList: {
                    GWBrand: [], // 长城品牌
                    activityList: [], // 活动入口
                    statusList: [ // 活动状态
                        { key: 0, value: '未上线' },
                        { key: 1, value: '已上线' },
                        { key: 2, value: '已下线' }
                    ]
                },
                userData: {},
                loading: false
            }
        },
        created () {
            this.queryList()
        },
        computed: {
            total() {
                return this.tableData.length;
            }
        },
        methods: {
            // 点击查询置为第一页
            queryList1 () {
                this.queryForm.pageNum = 1
                this.queryList()
            },
            // 查询列表
            queryList () {
                let cData = [];
                    cData = [
                        {"index":"1", "szDate": "2020-07-21 15:00-17:00","szType": "冰雹","szPosition": "北京市通州区大羊坊桥","yjDate": "2020-07-21 11:00-14:30","bxType": "APP","bxResult": "避险成功","bonus": "500元"},
                        {"index":"2", "szDate": "2020-07-21 15:00-17:00","szType": "冰雹","szPosition": "北京市通州区大羊坊桥","yjDate": "2020-07-21 11:00-14:30","bxType": "APP","bxResult": "避险失败","bonus": "0元"},
                        {"index":"3", "szDate": "2020-07-21 15:00-17:00","szType": "道路积水","szPosition": "北京市通州区大羊坊桥","yjDate": "2020-07-21 11:00-14:30","bxType": "APP","bxResult": "避险成功","bonus": "0元"},
                        {"index":"4", "szDate": "2020-07-21 15:00-17:00","szType": "道路积水","szPosition": "北京市通州区大羊坊桥","yjDate": "2020-07-21 11:00-14:30","bxType": "短信","bxResult": "避险成功","bonus": "500元"},
                    ];
                this.tableData = cData;
            },
            reset () {
                this.queryForm.brand = ''
                this.queryForm.activityId = ''
                this.queryForm.activityStatus = ''
                this.queryForm.activityTitle = ''
                this.queryForm.pageNum = 1
                this.queryForm.pageSize = 10
                this.queryList()
            },
            // 多选列表项
            changeSelection (val) {
                this.tableSelection = val
            },
            // 每页显示条数
            pageSizeChange (val) {
                let pages = Math.ceil(this.total / val)
                this.queryForm.pageSize = val
                if (this.queryForm.pageNum > pages) {
                    this.queryForm.pageNum = 1
                }
                this.queryList()
            },
            // 当前页码
            pageCurrentChange (val) {
                this.queryForm.pageNum = val
                this.queryList()
            }
        }
    }
</script>

<style scoped>
    fieldset{border-radius: 8px;border-color: #DDDDDD;background: #FFFFFF;font-family: 'MicrosoftYaHei';font-size: 14px;}
    legend{color: #3C3A6F;font-size: 16px;margin-left: 2%;line-height: 21px;width: 5.5%;}
    .lines{width: 2px;height: 10px;float: left;border-radius: 1px;margin-top: 7px;background: #F7AB48;margin-left: 2%;margin-right: 5%;}
    .flex div{margin-bottom: 1%;color: #686786;}
    .flex span{font-family: 'Arial';font-weight: bold;color: #2C2B38;font-size: 14px;}
    .fs18{font-weight: bold;}
</style>
